export default function loadImg(url, callback) {
  let img = new Image()
  img.crossOrigin = ""
  img.onload = function() {
    callback(getSimilarColor(img))
  }
  img.src = url
}
function getSimilarColor(_img, cb) {
  let canvas = document.createElement('canvas')
  canvas.width = _img.width
  canvas.height = _img.height
  let context = canvas.getContext('2d')
  context.drawImage(_img, 0, 0, canvas.width, canvas.height)
  let data = context.getImageData(0, 0, _img.width, _img.height).data
  let r = 1, g = 1, b = 1
  for (let row = 0; row < _img.height; row++) {
    for (let col = 0; col < _img.width; col++) {
      if (row == 0) {
        r += data[((_img.width *row) + col)]
        g += data[((_img.width *row) + col) + 1]
        b += data[((_img.width *row) + col) + 2]
      } else {
        r += data[((_img.width *row) + col) * 4]
        g += data[((_img.width *row) + col) * 4 + 1]
        b += data[((_img.width *row) + col) * 4 + 2]
      }
    }
  }
  r = Math.round(r/(_img.width*_img.height))
  g = Math.round(g/(_img.width*_img.height))
  b = Math.round(b/(_img.width*_img.height))
  return `rgba(${r}, ${g}, ${b}, 0.5)`
}